<template>
	<view class="content">
		<view class="massage" v-if="code === 0" @click="goPage(1)">
			<view class="picture">
				<image :src="photo" mode="" class="default"></image>
			</view>
			<view class="right">
				<view class="name">
					{{userName}}
					<view class="identity">家长</view>
				</view>
				<view class="number">
					用户账号：{{userNumaber}}
				</view>
			</view>
		</view>
		<view class="massage" v-if="code === 1">
			<view class="picture">
				<image :src="photo" mode="" class="default"></image>
			</view>
			<view class="right">
				<view class="name">
					{{users.name}}
					<view class="identity">家长</view>
				</view>
				<view class="number">
					用户账号：{{users.username}}
				</view>
			</view>
		</view>
		<view class="menu">
			<view class="help" @click="goPage(2)">
				<image class="list1" src="../../static/image/使用帮助 .png" mode=""></image>
				使用帮助
				<image class="xiangyou" src="../../static/image/向右箭头.png" mode=""></image>
			</view>
			<view class="setpwd" @click="goPage(3)">
				<image class="list2" src="../../static/image/修改密码.png" mode=""></image>
				修改密码
				<image class="xiangyou" src="../../static/image/向右箭头.png" mode=""></image>
			</view>
			<view class="versions" @click="goPage(4)">
				<image class="list3" src="../../static/image/版本号.png" mode=""></image>
				<view class="text">
					版本号
				</view>
				<image class="xiangyou" src="../../static/image/向右箭头.png" mode=""></image>
			</view>
			<view class="exit" @click="goPage(1)">
				<image class="list4" src="../../static/image/退出登录.png" mode=""></image>
				退出登录
				<image class="xiangyou" src="../../static/image/向右箭头.png" mode=""></image>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				code: '',
				users: {
					name: '',
					username: ''
				},
				isLoggedIn: false,
				userName: '点击登录',
				userNumaber: '登录后显示',
				photo: '../../static/image/默认头像.png'
			}
		},
		methods: {
			goPage(id) {
				console.log(id);
				if (id == 1) {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}else if(id == 3){
					uni.navigateTo({
						url: '/pages/setmima/setmima'
					})
				}else if(id == 2){
					uni.navigateTo({
						url: '/pages/fuwu/fuwu'
					})
				}else if(id == 4){
					uni.navigateTo({
						url: '/pages/banben/banben'
					})
				}
			},
			getJwtToken() {
				try {
					return wx.getStorageSync('jwt_token');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			// 假设你使用 uni.request 发送请求  
			sendRequestWithToken(url, method) {
				const token = this.getJwtToken();
				if (token) {
					wx.request({
						url: url,
						method: method,
						header: {
							'token': token // 将令牌添加到 Authorization 头部  
						},
						success: (res) => {
							if (res.data.code === 1 && res.data.msg === 'success') {
								this.code = res.data.code;
								this.users = res.data.data;


							} else if (res.data.code === 0) {
								uni.showToast({
									title: '登录信息有误',
									icon: null
								});
								this.goPage(7);
								console.error('未登录', res.data.data);
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error('请求失败', error);
						}
					});
				} else {
					this.goPage(7);
					// 如果没有令牌，处理没有令牌的情况，比如跳转到登录页  
					console.error('No token found, please login first.');
				}
			},
			getuserName() {
				try {
					return wx.getStorageSync('user_name');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			// 在某个页面的事件处理函数中  
			showMsg() {
				const username = this.getuserName();
				if (username) {
					const url = `http://localhost:8080/patra/main/${username}`;
					const method = 'GET';
					this.sendRequestWithToken(url, method);
				} else {
					console.error('用户名未找到');
				}
			},

			onLoad() {
				this.showMsg();
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		width: 100%;
		height: auto;
		margin: 0%;
		padding: 0%;
	}

	.massage {
		display: flex;
		align-items: center;
		justify-items: center;
		height: 280rpx;
		width: 100%;

	}

	.picture {
		display: flex;
		width: 100rpx;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		margin: 30rpx;

	}

	.default {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.default {
		width: 100rpx;
		height: 100rpx;
	}

	.right {
		width: 700rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.name {
		display: flex;
		align-items: center;
		width: 300rpx;
		height: 70rpx;
		margin-left: 25rpx;
		font-size: 35rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
	}

	.identity {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 30rpx;
		font-size: 24rpx;
		background-color: #B8B7F5;
		border-radius: 30rpx;
		margin-left: 20rpx;
		color: white;
	}

	.number {
		width: 400rpx;
		height: 30rpx;
		margin-left: 30rpx;
		font-size: 25rpx;
		font-family: AliMamaShuHei;
	}

	.menu {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: auto;
		background-color: white;
		border-radius: 30rpx;
	}

	.help,
	.setpwd,
	.versions,
	.exit {
		display: flex;
		align-items: center;
		height: 100rpx;
		width: 100%;
		font-size: 30rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
	}

	.list1,
	.list2,
	.list3,
	.list4 {
		height: 38rpx;
		width: 38rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.xiangyou {
		height: 38rpx;
		width: 38rpx;
		margin-left: 480rpx;
	}

	.text {
		margin-right: 29rpx;
	}
</style>